/* 通用样式 - 解决底部导航栏覆盖问题 */

/* 为底部导航栏预留空间 */
.tab-bar-safe-area {
  padding-bottom: 120rpx; /* 底部导航栏高度 + 安全间距 */
}

/* 页面容器通用样式 */
.page-container {
  min-height: 100vh;
  padding-bottom: 120rpx; /* 为底部导航栏预留空间 */
}

/* 底部操作按钮区域 */
.bottom-action-area {
  margin-bottom: 160rpx; /* 为底部导航栏预留足够空间 */
}

/* 底部内容区域 */
.bottom-content-area {
  padding-bottom: 160rpx; /* 为底部导航栏预留足够空间 */
}

/* 响应式底部间距 */
@media screen and (max-height: 700px) {
  .tab-bar-safe-area,
  .page-container {
    padding-bottom: 140rpx; /* 小屏幕设备增加间距 */
  }
  
  .bottom-action-area,
  .bottom-content-area {
    margin-bottom: 180rpx;
  }
}

/* 大屏幕设备优化 */
@media screen and (min-height: 800px) {
  .tab-bar-safe-area,
  .page-container {
    padding-bottom: 100rpx; /* 大屏幕设备可以减少间距 */
  }
  
  .bottom-action-area,
  .bottom-content-area {
    margin-bottom: 140rpx;
  }
}
